<template>

  <div class="app-container">


    <el-form ref="form" :model="user" label-width="80px">
      <el-form-item label="用户姓名">
        <el-input v-model="user.username"  style="width: 217px;" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-select v-model="state" placeholder="用户性别" :disabled="true">
          <el-option
            v-for="item in options"
            :key="item.state"
            :label="item.label"
            :value="item.state">
          </el-option>
        </el-select>
      </el-form-item>

<!--      <el-form-item label="角色">-->
<!--        <el-input v-model="userw.roleName"  style="width: 217px;" :disabled="true"></el-input>-->
<!--      </el-form-item>-->


      <el-form-item label="头像">
        <!--     图片 "'api'+user.path"  -->
        <el-image
          style="width: 100px; height: 100px"
          :src="'/api'+this.$store.state.user.path"
          ></el-image>
      </el-form-item>


      <el-form-item label="角色姓名">
        <el-input v-model="this.$store.state.user.roles"  style="width: 217px;" :disabled="true"></el-input>
      </el-form-item>

      <el-form-item>
        <!--        给修改前加上一个判断条件 是否需要修改-->
        <el-button type="primary" @click="onSubmit">修改</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onBookShelf">我的书架</el-button>
        <!--        给修改前加上一个判断条件 是否需要修改-->
        <el-button @click="onOrder">我的订单</el-button>
      </el-form-item>
<!--      帮我写一个消息框-->
      <el-form-item label="消息中心">

      </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="handleDelete">确认删除</el-button>
        </el-form-item>

    </el-form>
<!--    帮我把对象messages放进下面的滑轮中-->

    <el-table :data="messages" border style="width:100%"
              @selection-change="selectionChange"
              stripe>

      <el-table-column
        type="selection"
        align="center"
      >
      </el-table-column>

      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="100">
      </el-table-column>

      <el-table-column
        prop="date"
        label="日期"
        width="480"
        align="center">
      </el-table-column>

      <el-table-column
        prop="messages"
        label="消息"
        align="center"
        width="400">
      </el-table-column>



    </el-table>

<!--    <el-table>-->
<!--      <el-form-item>-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          @click="handleDelete(scope.$index, scope.row)"-->
<!--        >删除</el-button>-->
<!--      </el-form-item>-->
<!--    </el-table>-->



    </div>


</template>



<script>
import axios from "axios";

export default {
  name: "UserView",
  data() {
    return {
      user:{
        id:'',
        username:'',
      },
      userw:{
        roleName:"",
      },
      options: [{
        // value: '选项1',
        label: '男',
        state: '1',
      }, {
        // value: '选项2',
        label: '女',
        state: '2',
      } ],
      state: '',
      role:[],  //用户当前的角色
      roles:[
      ], //所有的角色
      text:'',
      //总的消息条数
      messages:[],


    }

  },
  // 前置执行方法在执行之前    beforeCreate()   axios.post(get)("http://localhost:8080/queryAll").then(...)
  created() { // 这是可以获取data中的数据后  再执行下面的axios
    this.getData()
  },
  methods: {
    sta(pageInfo) {
      if (pageInfo.state == 1) {
        return '男'
      } else {
        return '女'
      }
    },

    // 修改角色
    handleEdit(index, row) {
      // alert(row.id)
      // 使用路由的push方法  跳转到医生信息修改页面
      this.$router.push({ name: 'UserMemberEditView', query: { id: row.id }})
    },

    // 获取数据
    getData() {
      var formData = new FormData();
      console.log(this.$store.state.user.roles)
      formData.append("username", this.$store.state.user.name)
      axios({
        //根据用户名查询用户的个人信息
        url: '/api/user/queryUser',
        method: 'post',
        data: formData,
        headers:{"Authorization":"Bearer "+this.$store.state.user.token}
      }).then(res => {
        // console.log(res.data.data.list[0].moduleList)
        // console.log(res.data.data)
        this.user=res.data.data
        if(res.data.data.state==1){
          this.state='男'
        }else{
          this.state='女'
        }

        //根据用户id查询用户的角色  /getRoleName
        axios({
          //根据用户名查询用户的个人信息
          url: '/api/user/getRoleName/' + this.user.id,
          method: 'post',
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          this.userw.roleName=res.data.data
        })

        //根据用户id查询所有的消息 /queryMessId/
        axios({
          url: '/api/user/queryMessId/' + this.user.id,
          method: 'post',
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          this.messages=res.data.data
          // console.log(res.data)
        })

      })
    },
    // 修改
    onSubmit() {
      this.$router.push({ name: 'UserCenterEditView', query: { id: this.user.id }})
    },
    // 跳转到我的书架
    onBookShelf() {
      this.$router.push({ name: 'BookShelfView'})
    },
    //跳转到我的订单
    onOrder() {
      this.$router.push({ name: 'OrderView'})
    },
    // this.$router.push({name:})
    selectionChange(val){
      this.selection=val
    },

    // 删除
    handleDelete() {
      var formData = new FormData();
      for (const Key in this.selection) {
        formData.append("messids", this.selection[Key].id)
      }
      if (confirm('确定要删除吗')) {
        axios({
          url: '/api/messages/delByMessId',
          method: 'post',
          data: formData,
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res => {
          if (res.data.code == 1) {
            // 更新本页数据
            this.getData()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error('删除失败')
            this.getData()
          }

        })
      }



    }
    // this.$router.push({name:})
  }


}
</script>

<style scoped>

</style>
